<template>
	<view class="profile-container">
		<!-- 顶部用户信息区域 -->
		<view class="header-section">
			<!-- 背景装饰 -->
			<view class="header-bg">
				<view class="bg-overlay"></view>
				<view class="bg-pattern"></view>
			</view>
			
			<view class="user-info">
				<view class="avatar-wrapper">
					<uv-avatar 
						:src="userInfo.avatar || 'https://via.placeholder.com/200x200.png/2878ff'" 
						size="large"
						shape="circle"
						:border="true"
						:borderColor="'#fff'"
						:borderWidth="4"
					></uv-avatar>
					<view class="vip-badge" v-if="userLevel.vip">
						<uv-icon name="vip" size="20" color="#FFD700"></uv-icon>
					</view>
				</view>
				
				<view class="user-details">
					<view class="username-wrapper">
						<view class="username">{{ userInfo.nickname || '游客' }}</view>
						<uv-icon 
							name="man" 
							size="24" 
							color="#4ECDC4" 
							v-if="userInfo.gender === 'male'"
							customStyle="margin-left: 10rpx;"
						></uv-icon>
						<uv-icon 
							name="woman" 
							size="24" 
							color="#FF6B6B" 
							v-if="userInfo.gender === 'female'"
							customStyle="margin-left: 10rpx;"
						></uv-icon>
					</view>
					<view class="user-id">ID: {{ userInfo.id || '000000' }}</view>
					<view class="user-level">
						<uv-tag 
							:text="userLevel.name" 
							:bgColor="userLevel.color" 
							:color="'#fff'" 
							:size="'mini'"
							:shape="'circle'"
						></uv-tag>
						<uv-tag 
							:text="userLevel.points + '积分'" 
							:bgColor="'#f0f0f0'" 
							:color="'#666'" 
							:size="'mini'"
							:shape="'circle'"
							customStyle="margin-left: 10rpx;"
						></uv-tag>
					</view>
				</view>
				
				<view class="edit-profile" @tap="editProfile">
					<uv-button 
						type="primary" 
						size="mini" 
						shape="circle" 
						:plain="true"
						:border="true"
						:borderColor="'#fff'"
						:text="'编辑资料'"
						:customStyle="{
							padding: '0 20rpx',
							height: '50rpx',
							fontSize: '24rpx'
						}"
					></uv-button>
				</view>
			</view>
			
			<!-- 统计信息 -->
			<view class="stats-section">
				<view class="stat-item" @tap="goToOrders">
					<view class="stat-icon">
						<uv-icon name="order" size="36" color="#007AFF"></uv-icon>
					</view>
					<view class="stat-info">
						<view class="stat-value">{{ stats.orders }}</view>
						<view class="stat-label">我的订单</view>
					</view>
				</view>
				
				<view class="stat-item" @tap="goToFavorites">
					<view class="stat-icon">
						<uv-icon name="star" size="36" color="#FF9900"></uv-icon>
					</view>
					<view class="stat-info">
						<view class="stat-value">{{ stats.favorites }}</view>
						<view class="stat-label">我的收藏</view>
					</view>
				</view>
				
				<view class="stat-item" @tap="goToCoupons">
					<view class="stat-icon">
						<uv-icon name="coupon" size="36" color="#19be6b"></uv-icon>
					</view>
					<view class="stat-info">
						<view class="stat-value">{{ stats.coupons }}</view>
						<view class="stat-label">优惠券</view>
					</view>
				</view>
				
				<view class="stat-item" @tap="goToWallet">
					<view class="stat-icon">
						<uv-icon name="rmb" size="36" color="#9c27b0"></uv-icon>
					</view>
					<view class="stat-info">
						<view class="stat-value">{{ stats.wallet }}</view>
						<view class="stat-label">我的钱包</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 快捷功能区域 -->
		<view class="quick-actions">
			<view class="section-title">
				<view class="title-text">快捷功能</view>
				<view class="title-line"></view>
			</view>
			<view class="actions-grid">
				<view class="action-item" v-for="(action, index) in quickActions" :key="index" @tap="handleQuickAction(action)">
					<view class="action-icon" :style="{ background: 'linear-gradient(135deg, ' + action.gradient[0] + ', ' + action.gradient[1] + ')' }">
						<uv-icon :name="action.icon" :color="'#fff'" :size="32"></uv-icon>
					</view>
					<view class="action-text">{{ action.text }}</view>
				</view>
			</view>
		</view>
		
		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<view class="section-title">
				<view class="title-text">功能中心</view>
				<view class="title-line"></view>
			</view>
			
			<view class="menu-grid">
				<view class="menu-item" v-for="(menu, index) in menuList" :key="index" @tap="handleMenu(menu)">
					<view class="menu-icon-wrapper">
						<view class="menu-icon" :style="{ background: 'linear-gradient(135deg, ' + menu.gradient[0] + ', ' + menu.gradient[1] + ')' }">
							<uv-icon :name="menu.icon" :color="'#fff'" :size="36"></uv-icon>
						</view>
						<view class="menu-badge" v-if="menu.badge">
							<uv-badge :value="menu.badge" :max="99" type="error" size="mini"></uv-badge>
						</view>
					</view>
					<view class="menu-text">{{ menu.text }}</view>
				</view>
			</view>
			
			<view style="height: 20rpx;"></view>
			
			<uv-cell-group>
				<uv-cell 
					title="设置" 
					isLink 
					:border="false"
					@click="goToSettings"
				>
					<template #icon>
						<uv-icon name="setting" size="24" color="#666" customStyle="margin-right: 15rpx;"></uv-icon>
					</template>
					<template #value>
						<text class="cell-value">个性化设置</text>
					</template>
				</uv-cell>
				
				<uv-cell 
					title="帮助与反馈" 
					isLink 
					:border="false"
					@click="goToHelp"
				>
					<template #icon>
						<uv-icon name="question-circle" size="24" color="#666" customStyle="margin-right: 15rpx;"></uv-icon>
					</template>
					<template #value>
						<text class="cell-value">使用帮助</text>
					</template>
				</uv-cell>
				
				<uv-cell 
					title="关于应用" 
					isLink 
					:border="false"
					@click="goToAbout"
				>
					<template #icon>
						<uv-icon name="info-circle" size="24" color="#666" customStyle="margin-right: 15rpx;"></uv-icon>
					</template>
					<template #value>
						<text class="cell-value">版本v1.0.0</text>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>
		
		<!-- 底部退出登录按钮 -->
		<view class="logout-section" v-if="userInfo.isLogin">
			<uv-button 
				type="error" 
				shape="circle" 
				size="large"
				@click="logout"
				:customStyle="{
					margin: '0 30rpx',
					fontWeight: 'bold'
				}"
			>
				<uv-icon name="logout" size="24" color="#fff" customStyle="margin-right: 10rpx;"></uv-icon>
				退出登录
			</uv-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Profile',
		data() {
			return {
				userInfo: {
					id: '123456',
					nickname: '张三',
					avatar: 'https://via.placeholder.com/200x200.png/2878ff',
					isLogin: true,
					gender: 'male'
				},
				userLevel: {
					name: '黄金会员',
					color: '#FF9900',
					vip: true,
					points: 2560
				},
				stats: {
					orders: 12,
					favorites: 8,
					coupons: 3,
					wallet: '128.50'
				},
				quickActions: [
					{ text: '待付款', icon: 'rmb-circle', gradient: ['#FF6B6B', '#FF8E8E'], action: 'pendingPayment' },
					{ text: '待使用', icon: 'clock', gradient: ['#4ECDC4', '#66D6CC'], action: 'pendingUse' },
					{ text: '待评价', icon: 'edit-pen', gradient: ['#FFD166', '#FFE188'], action: 'pendingReview' },
					{ text: '退款/售后', icon: 'refund', gradient: ['#6A0572', '#9A45A2'], action: 'refund' }
				],
				menuList: [
					{ text: '我的足迹', icon: 'eye', gradient: ['#118AB2', '#073B4C'], badge: 0, action: 'footprint' },
					{ text: '我的积分', icon: 'integral', gradient: ['#06D6A0', '#049B70'], badge: 2560, action: 'points' },
					{ text: '会员中心', icon: 'vip', gradient: ['#FFD166', '#FF9F1C'], badge: 0, action: 'vip' },
					{ text: '我的活动', icon: 'gift', gradient: ['#EF476F', '#D41B47'], badge: 2, action: 'activities' },
					{ text: '我的评价', icon: 'chat', gradient: ['#073B4C', '#118AB2'], badge: 0, action: 'reviews' },
					{ text: '我的分享', icon: 'share', gradient: ['#FF9F1C', '#FFD166'], badge: 0, action: 'share' }
				]
			}
		},
		methods: {
			editProfile() {
				uni.showToast({
					title: '编辑资料',
					icon: 'none'
				});
			},
			goToOrders() {
				uni.showToast({
					title: '查看订单',
					icon: 'none'
				});
			},
			goToFavorites() {
				uni.showToast({
					title: '查看收藏',
					icon: 'none'
				});
			},
			goToCoupons() {
				uni.showToast({
					title: '查看优惠券',
					icon: 'none'
				});
			},
			goToWallet() {
				uni.showToast({
					title: '我的钱包',
					icon: 'none'
				});
			},
			goToAddress() {
				uni.showToast({
					title: '地址管理',
					icon: 'none'
				});
			},
			goToSettings() {
				uni.showToast({
					title: '系统设置',
					icon: 'none'
				});
			},
			goToHelp() {
				uni.showToast({
					title: '帮助与反馈',
					icon: 'none'
				});
			},
			goToAbout() {
				uni.showToast({
					title: '关于应用',
					icon: 'none'
				});
			},
			handleQuickAction(action) {
				uni.showToast({
					title: '查看' + action.text,
					icon: 'none'
				});
			},
			handleMenu(menu) {
				uni.showToast({
					title: '进入' + menu.text,
					icon: 'none'
				});
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
							// 这里可以添加退出登录的逻辑
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
.profile-container {
	height: 100%;
	width: 100%;
	background: linear-gradient(to bottom, #f5f5f5, #e0e0e0);
	display: flex;
	flex-direction: column;
	padding: 20rpx;
	box-sizing: border-box;
	overflow-y: auto;
}

.header-section {
	position: relative;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.header-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	
	.bg-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.1);
	}
	
	.bg-pattern {
		position: absolute;
		top: -50%;
		right: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, transparent 20%, rgba(255, 255, 255, 0.1) 21%, rgba(255, 255, 255, 0.1) 22%, transparent 23%);
		background-size: 100rpx 100rpx;
		transform: rotate(30deg);
	}
}

.user-info {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	
	.avatar-wrapper {
		position: relative;
		
		.vip-badge {
			position: absolute;
			bottom: 0;
			right: 0;
			background: linear-gradient(135deg, #FFD700, #FFA500);
			border-radius: 50%;
			padding: 6rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		}
	}
	
	.user-details {
		flex: 1;
		margin-left: 20rpx;
		color: #fff;
		
		.username-wrapper {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			
			.username {
				font-size: 36rpx;
				font-weight: bold;
				color: #fff;
			}
		}
		
		.user-id {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 10rpx;
		}
		
		.user-level {
			display: flex;
			align-items: center;
		}
	}
	
	.edit-profile {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.stats-section {
	display: flex;
	justify-content: space-around;
	margin-top: 40rpx;
	padding-top: 30rpx;
	border-top: 1rpx solid rgba(255, 255, 255, 0.2);
	
	.stat-item {
		text-align: center;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.stat-icon {
			margin-bottom: 10rpx;
		}
		
		.stat-info {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.stat-value {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 5rpx;
		}
		
		.stat-label {
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.9);
		}
	}
}

.quick-actions {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-right: 20rpx;
	}
	
	.title-line {
		flex: 1;
		height: 2rpx;
		background: linear-gradient(to right, #667eea, transparent);
	}
}

.actions-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20rpx;
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.action-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 15rpx;
			box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
		}
		
		.action-text {
			font-size: 24rpx;
			color: #666;
		}
	}
}

.menu-section {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	flex: 1;
	overflow-y: auto;
}

.menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30rpx;
	margin-bottom: 30rpx;
	
	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.menu-icon-wrapper {
			position: relative;
			margin-bottom: 15rpx;
			
			.menu-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 6rpx 15rpx rgba(0, 0, 0, 0.1);
			}
			
			.menu-badge {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}
		
		.menu-text {
			font-size: 26rpx;
			color: #333;
		}
	}
}

.cell-value {
	color: #999;
	font-size: 26rpx;
}

.logout-section {
	padding: 30rpx 0;
	text-align: center;
}
</style>